<template>
  <div>
    <el-container>
      <!--侧边栏-->
      <el-aside :width="asideWidth" style="min-height: 100vh; background-color: #001529;">
        <div style="height: 60px;color: white;display: flex;align-items: center;
                justify-content: center;">
          <img src="@/assets/mistake-logo.jpeg" alt="" style="width: 40px; height: 40px;">
          <span class="logo-title" v-show="!isCollapse" style="margin-left: 5px">错题本</span>
        </div>
        <el-menu :collapse="isCollapse" :collapse-transition="false" style="border: none;" :default-active="$route.path"
                 background-color="#001529" text-color="rgba(255,255,255,0.65)" active-text-color="#fff" router>
          <el-menu-item index="/main">
            <i class="el-icon-s-home"></i>
            <span slot="title">主页</span>
          </el-menu-item>
          <el-menu-item index="/mistake">
            <i class="el-icon-help"></i>
            <span slot="title">错题页面</span>
          </el-menu-item>
          <el-menu-item index="/practice">
            <i class="el-icon-edit"></i>
            <span slot="title">错题训练</span>
          </el-menu-item>
          <el-menu-item index="/label">
            <i class="el-icon-house"></i>
            <span slot="title">标签管理</span>
          </el-menu-item>
          <el-menu-item index="/statistics">
            <i class="el-icon-s-data"></i>
            <span slot="title">错题统计</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <!--头部区域-->
        <el-header>
          <i :class="collapseIcon" style="font-size: 26px;" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left: 20px;">
            <el-breadcrumb-item to="/main">主 页</el-breadcrumb-item>
            <el-breadcrumb-item to="/mistake">错题页面</el-breadcrumb-item>
            <el-breadcrumb-item to="/practice">错题训练</el-breadcrumb-item>
            <el-breadcrumb-item to="/label">标签管理</el-breadcrumb-item>
            <el-breadcrumb-item to="/statistics">错题统计</el-breadcrumb-item>
          </el-breadcrumb>
        </el-header>
        <!--主体区域-->
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'home',
  data() {

    return {
      //默认菜单不收缩
      isCollapse: false,
      //侧边栏宽度
      asideWidth: '128px',
      //默认显示图标为收缩图标
      collapseIcon: 'el-icon-s-fold',
    }
  },
  methods: {
    //控制菜单的左右收缩
    handleCollapse() {
      this.isCollapse = !this.isCollapse
      this.asideWidth = this.isCollapse ? '64px' : '128px'
      this.collapseIcon = this.isCollapse ? 'el-icon-s-unfold' : 'el-icon-s-fold'
    },
  }

}
</script>

<style scoped>
@import "@/css/global.css";
</style>
